<template>
        <div class="aaa">
            <ul   >
                <li ref="listArr"  v-for="(item,index) in list" :class="item.bgc" :key="index"  >
                        <input type="checkbox" :id="index" v-model="ischeckbox" :value="item.id" style="display:none">
                        <label style="padding:5px 20px;" :for='index'>{{item.name}}</label>
                        <b>{{item.id}}</b>
                </li>
                </ul>
                <div @click="submit" style="padding:5px 20px;">提交</div>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return{
                list:[
                    {id:1,name:'测试1'},
                    {id:2,name:'测试2'},
                    {id:3,name:'测试2'},
                    {id:4,name:'测试2'},
                    {id:5,name:'测试2'},
                    {id:6,name:'测试2'},
                ],
                ischeckbox:[],
                
            }
        },
        updated() {
            this.list.forEach(element=>{
             if(this.ischeckbox.includes(element.id)){
                   this.$set(element, "bgc", 'red')
              }else{
                  this.$set(element, "bgc", ' ')
              }
          })
        },
        methods:{
            submit(){
                   let  arr=[]
                    this.list.forEach(element=>{
                    if(this.ischeckbox.includes(element.id)){
                        arr.push(element)
                        }
                    })
                console.log(arr)
            }
        }
    }
    </script>
    
    <style>
    .aaa ul{
        display: inline-block;
    }
    .aaa ul  li{
        display: inline-block;
        margin: 20px;
        
        background-color: yellowgreen;
        color: #fff;
    }
    
    .aaa .red{
        background-color: red;
        color: #000;
    }
    </style>
    